<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <!-- 表单中有个事件   input事件  只要用户输入一个字符或者删除一个字符
        实时触发
    -->
    <script>
        /*  函数节流
        + 短时间内快速触发同一个事件
        + 第一次执行过程中, 不能重复触发, 等到第一次执行完毕后, 才可以触发第二次
        
        */

        var inp = document.querySelector('input');
        // var flag = true;
        // inp.oninput = function(){
        //     if(flag == false){
        //         return 
        //     }
        //     // 走到这里说明 这个函数执行 
        //     flag = false; // 这个函数执行防止别的函数执行 改变flag状态
        //     // 开始执行  
        //     timer = setTimeout(()=>{
        //         console.log(`您输入的内容${this.value}`);

        //         flag = true; // 这个函数执行完毕 修改状态 别的函数可以执行了
        //     },300);

        // }
        inp.oninput = (function(flag){
            return function(){
                if(flag == false){
                return 
            }
            // 走到这里说明 这个函数执行 
            flag = false; // 这个函数执行防止别的函数执行 改变flag状态
            // 开始执行  
            timer = setTimeout(()=>{
                console.log(`您输入的内容${this.value}`);

                flag = true; // 这个函数执行完毕 修改状态 别的函数可以执行了
            },300);
            }
        })(true)

    </script>
</body>

</html>